@import "../../style/variable";

@mixin button-base {
	// 布局样式
	@apply inline-flex items-center justify-center;
	// 元素属性
	@apply border-[1px] border-solid border-transparent h-[28px] py-0 px-[20px] bg-transparent;
	border-radius: $s-border-radius;
	// 文本属性
	@apply outline-0 leading-normal whitespace-nowrap cursor-pointer;
	// 文字样式
	font-size: $s-font-size-md;
	// 其它样式
	transition:
		background-color $s-animation-duration-slow $s-animation-ease-in-out-smooth,
		border-color $s-animation-duration-slow $s-animation-ease-in-out-smooth,
		color $s-animation-duration-slow $s-animation-ease-in-out-smooth;
	// 禁用状态
	&[disabled] {
		@apply cursor-not-allowed;
	}
	// block
	&.s-btn--block {
		@apply block w-full;
	}
}

@mixin button-variant($variant, $pseudo: false) {
	@each $key, $value in $variant {
		// 第一层是多态的类型
		&.s-btn--#{$key} {
			//第二层是多态类型下的样式
			@each $item-key, $item-value in $value {
				// 如果是伪类就继续第三层
				@if $pseudo {
					&:#{$item-key} {
						// 第三层是伪类的样式
						@each $sub-item-key, $sub-item-value in $item-value {
							#{$sub-item-key}: $sub-item-value;
						}
					}
				} @else {
					#{$item-key}: $item-value;
				}
			}
		}
	}
}
